<template>
  <div class="Home">
    <template v-if="showHome">
      <!-- logo -->
      <div class="header">
        <img src="@/img/images/198.png" alt="" />
        <div class="headerimg">
          <img src="@/img/images/nike.png" alt="" />
        </div>
        <div class="headerfontsiza">莆田特卖 | 100%高仿</div>
      </div>
      <!-- 搜索框 -->
      <!-- <van-search
      shape="round"
      placeholder="请输入搜索关键词"
      input-align="center"
    /> -->
      <van-search
        @focus="$router.push('/home/seek')"
        placeholder="请输入搜索关键词"
      />
      <!-- 轮播swipe -->
      <div class="box">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in lunbo" :key="item.imgs">
            <img v-lazy="item.img" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 九宫格 -->
      <van-grid square clickable border>
        <van-grid-item v-for="item in grid" :key="item.img" :to="item.to">
          <div class="item">
            <img :src="item.img" />
            <div class="text">{{ item.text }}</div>
          </div>
        </van-grid-item>
      </van-grid>
      <div style="text-align: center">
        <img src="@/img/images/1.png" alt="" />
      </div>
      <!-- 商品列表 -->
      <div class="GoodsList">
        <!-- <div class="item" v-for="item in goods" :key="item.id">
        <div class="imgcc flexCcc">
          <img v-lazy="item.img_url" />
        </div>
        <div class="title ellipsis_l1">{{ item.title }}</div>
        <div class="price">
          <span>&yen; {{ item.sell_price }}</span>
          <span>{{ item.buy }}</span>
        </div>
      </div> -->
        <!-- 父亲传递值:自定义属性 -->
        <!-- 儿子告诉父亲:自定义事件名 -->
        <Goods
          v-for="item in goods"
          :key="item.id"
          :data="item"
          @click="GoodsHandle"
        ></Goods>
      </div>
      <div class="beianbox">
        <div class="beian">
          <img src="../img/images/警徽.png" alt="" />
        </div>
        <div class="beiantext">粤ICP备2021160051号</div>
      </div>

      <!-- 引入backTop组件 -->
      <BackTop :top="500" />
    </template>

    <!-- 显示子路由内容 -->
    <router-view />
  </div>
</template>
<script>
import { fetchLunbo, fetchShoping } from "@/api/index.js";
// 导入商品组件
import Goods from "@/components/Goods.vue";
import BackTop from "@/components/BackTop.vue";
export default {
  name: "Home",
  data() {
    return {
      value: "",
      lunbo: [],
      showHome: true,
      grid: [
        {
          text: "Nike shop",
          img: require("@/img/images/nike.png"),
          to: "/GoodsList",
        },
        {
          text: "Adidas News",
          img: require("@/img/images/阿迪达斯1.png"),
          to: "/NewList",
        },
        {
          text: "Puma",
          img: require("@/img/images/彪马.png"),
          to: "/GoodsList",
        },
        {
          text: "Vans",
          img: require("@/img/images/万斯1.png"),
          to: "/GoodsList",
        },
        {
          text: "Canna Goose",
          img: require("@/img/images/加拿大11.png"),
          to: "/GoodsList",
        },
        {
          text: "Supreme",
          img: require("@/img/images/surpme.png"),
          to: "/GoodsList",
        },
        {
          text: "Aka",
          img: require("@/img/images/Aka.png"),
          to: "/GoodsList",
        },
        {
          text: "Exit",
          img: require("@/img/images/exit.png"),
          to: "/GoodsList",
        },
      ],
      goods: [],
    };
  },
  created() {
    // 初始化轮播图数据
    this._fetchLunbo();
    this._fetchShoping();
  },
  //点击触发子路由的
  beforeRouteUpdate(to, from, next) {
    console.log("path:", to.name);
    //是home页面为true 不是则false
    this.showHome = to.name === "home";
    next();
  },
  methods: {
    async getLunbo() {
      let result = await this.$httpGet("http://mobileshopapi.crashcold1023.icu/api/getlunbo");
      console.log(result);
    },
    async _fetchLunbo() {
      let { message } = await fetchLunbo();
      this.lunbo = message;
    },
    async _fetchShoping() {
      let { message } = await fetchShoping();
      this.goods = message;
      console.log(this.goods);
    },
    GoodsHandle(data, event) {
      this.$router.push("/GoodsDetail/" + data.id);
    },
  },
  components: {
    Goods,
    BackTop,
  },
};
</script>
<style lang="scss">
body {
  height: 100%;
}
.header {
  display: flex;
  justify-content: center;
  img {
    height: 3rem;
  }
}
.box {
  img {
    width: 100%;
    height: 100%;
  }
}

.van-search {
  flex: 1;
}

.my-swipe {
  .van-swipe-item {
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.van-grid {
  .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #524949;
    img {
      width: 50%;
    }
  }
}
.headerfontsiza {
  margin-left: 10px;
  line-height: 52px;
}
.headerimg {
  width: 48px;
  height: 48px;
}
// 搜素框
.van-search {
  border-top-style: outset;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
}
//商品列表
.GoodsList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background: #f0eded;
  padding-top: 10px;

  .item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 200px;
    width: 47%;
    padding: 6px;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 4px;
    font-size: 14px;
    .imgcc {
      height: 124px;
      width: 100%;
      img {
        height: 100%;
        width: 100%;
      }
    }

    .price {
      display: flex;
      justify-content: space-between;
      align-items: center;

      span:nth-child(1) {
        color: #ff845e;
        font-size: 16px;
        font-weight: 700;
      }

      span:nth-child(2) {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
.beianbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .beian img {
    width: 50px;
  }
}
</style>